<template>
  <view class="content">
    <view class="title">{{originIndex +1 }}/{{ originList.length }}</view>
    <swiper class="swiper" circular @change="swiperChange" swiperDuration="250">
      <swiper-item v-for="(item, index) in displaySwiperList" :key="index">
        <view class="wrap_content">{{ item }} </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originList: [], // 源数据
      displaySwiperList: [], // swiper需要的数据
      displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
      originIndex: 0, // 记录源数据的下标
    };
  },
  methods: {
    /**
     * 初始一个显示的swiper数据
     * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
     */
    initSwiperData(originIndex = this.originIndex) {
      const originListLength = this.originList.length; // 源数据长度
      const displayList = [];
      displayList[this.displayIndex] = this.originList[originIndex];
      displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
        this.originList[
          originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
        ];
      displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
        this.originList[
          originIndex + 1 == originListLength ? 0 : originIndex + 1
        ];
      this.displaySwiperList = displayList;
    },
    /**
     * swiper滑动时候
     */
    swiperChange(event) {
      const { current } = event.detail;
      const originListLength = this.originList.length; // 源数据长度
      // =============向后==========
      if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
        this.originIndex =
          this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
        this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
        this.initSwiperData(this.originIndex);
      }
      // ======如果两者的差为-2或者1则是向前滑动============
      else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
        this.originIndex =
          this.originIndex - 1 == -1
            ? originListLength - 1
            : this.originIndex - 1;
        this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
        this.initSwiperData(this.originIndex);
      }
    },
  },
  created() {
    for (let i = 1; i <= 1300; i++) {
      this.originList.push(i);
    }
    this.initSwiperData();
  },
};
</script>

<style>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
}
.swiper {
  height: calc(100vh - 120rpx);
}
.wrap_content {
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  height: 100vh;
  color: aqua;
  font-size: 80px;
  margin: 0rpx 40rpx;
}
</style>
